<template>
	<div class="roomlist">
		<div class="title" style="background: #F5F7FA;"><span>房间列表</span></div>
		<div class="room" v-for="(room, index) in list" :key="index">
			<div class="room_image">
				<el-carousel indicator-position="outside">
					<el-carousel-item v-for="(img1, index) in list1" :key="index">
					<h3>
						<img v-bind:src="img1.imgUrl" style="height: 100%; width: 100%;">
					</h3>
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="roominfo">
				<div class="roominformation_name">
					{{ room.room_name }}
				</div>
				<div class="roominformation">
					<div class="roominformation1">
						<div class="roominfotitle">是否有窗</div>
						<div class="roominforth">
							{{ room.isWindow ? '是' : '否' }}
						</div>
					</div>
				</div>
				<div class="roominformation">
					<div class="roominformation1">
						<div class="roominfotitle">有无WIFI</div>
						<div class="roominforth">
							{{ room.isWifi ? '有' : '无' }}
						</div>
					</div>
				</div>
			</div>
			<div class="roominfo">

				<div class="roominformation_price">
					<div class="roominfotitle">价格</div>
					<div class="roominforth_price">
						{{room.room_price}}元
					</div>
				</div>
				
				<div class="button1" >
					<div class="button2">
						<el-button class="button" circle  @click="goto"> 
						 {{room.status?'订购':'暂无房间'}}</el-button>
				</div>
					</div>
			</div>
		</div>

	</div>
</template>
<style>
* {
	margin: 0;
	padding: 0;
}

.body {
	overflow: hidden;
}
.roomlist {
	width: 100%;
	height: 100%;
	top: 2%;
	/* position: relative; */
	display: flex;
	flex-direction: column;

}

.roominformation1 {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

}

.roomlist::after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.room {
	width: 100%;
	height: 100%;
	background: white;
	display: flex;
	flex-direction: row;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

.roominfo {
	width: 35%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-right: 1px solid black;
	border-left: 1px solid black;
}

.roominformation {
	width: 100%;
	height: 33%;
	border-bottom: 1px solid grey;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.roominformation_price {
	width: 100%;
	height: 100%;

	align-items: center;

}

.roominformation_name {
	width: 100%;
	height: 33%;
	border-bottom: 1px solid grey;
	text-align: center;
	align-items: center;
	font-size: 40px;
}

.button1 {
	width: 100%;
	height: 33%;

	display: flex;
	justify-content: flex-end;
}

.button {
	width: 60%;
	height: 90%;
	background: aqua;
	color: black;
}
.button2{
	width: 30%;
	height: 100%;
}
.room_image {
	width: 30%;
}

.roominforth {
	height: 100%;
	width: 100%;
	text-align: center;
	align-items: center;
	font-size: 20px;
}

.roominforth_price {
	height: 100%;
	width: 100%;
	text-align: center;
	align-items: center;
	font-size: 60px;
	font-family: Harrington;
	color: red;
}

.roominfotitle {
	
	width: 100%;
	text-align: center;
	align-items: center;
	font-size: 20px;
	border-bottom: 1px solid grey;
	color: #606266;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
<script>
import RoomApi from "@/api/apiLiu/Room_request"

export default {
	name: "HotelVueChild1_lhj",
	data() {
		return {
			disable:false,
			list1:[],
			searchMap1:{
				room_id:1,
				imgUrl:null,
			},
			pojo1:{
				room_id:null,
				imgUrl:null,
			},
			list: [],
			searchMap: {
				room_id: null,
				bed_id: null,
				room_name: null,
				hotel_id:null,
				room_price: null,
				room_area: null,
				is_window: null,
				is_wifi: null,
				is_breakfast: null,
				description: null,
				status: null,
				pageNum: 1,
				pageSize: 4,
			},
			
			pojo: {
				room_id: null,
				bed_id: null,
				room_name: null,
				room_price: null,
				room_area: null,
				is_window: null,
				is_wifi: null,
				is_breakfast: null,
				description: null,
				status: null,
				
			},
			
			dialogFormVisible: false,
			dialogFormVisibleTwo: false,
			id: '',
		}
	},
	created() {
		//在创建vue实例后触发初始化钩子函数
		this.fetchData();
		this.fetchData1();
	},

	methods: {
		goto(){
			this.$router.push(
				{
					name:'room_lhj',
					params:{room_id:this.list[0].room_id,hotel_id:this.list[0].hotel_id}
				}
			)
	
		},
		add() {
			const room = {
				hotel_id:null,
				room_id: null,
				bed_id: null,
				room_name: null,
				room_price: null,
				room_area: null,
				is_window: null,
				is_wifi: null,
				is_breakfast: null,
				description: null,
				status: null,
				
				pageNum: 1,
				pageSize: 1,
			}
			this.list.unshift(room)
		},
		add1() {
			const img1 = {
				room_id: null,
				imgUrl:null,
			}
			this.list1.unshift(img1)
		},
		open(record, type) {
			console.log(record, type);
		},
		fetchData() {
			//编写一个方法请求后端的接口，把返回的数据赋值list
			RoomApi.selectList(this.searchMap).then(response => {
			//  //把返回的结果赋值模型
			console.log(response.data.data);
			this.list = response.data.data
			})
		},
		fetchData1() {
			//编写一个方法请求后端的接口，把返回的数据赋值list
			RoomApi.searchroom(this.searchMap1.room_id).then(response => {
				//  //把返回的结果赋值模型
				this.list1 = response.data.data
			})
		},
		
}}

</script>
